<template>
  <!-- 中国地图 -->
  <div id="main" ref="chinaMap" style="width: 100%; height: 100%" />
</template>

<script>
import * as echarts from 'echarts'
// src\json\geojson-master\echarts\china.json
import chinaMap from '@/json/geojson-master/echarts/china.json'
export default {
  name: 'Mymap',

  data() {
    return {
      // 假数据 空气质量
      airDate: [
        {
          name: '北京',
          value: 99.92
        },
        {
          name: '天津',
          value: 39.13
        },
        {
          name: '河北',
          value: 31.22
        },
        {
          name: '陕西',
          value: 40
        },
        {
          name: '山西',
          value: 55
        },
        {
          name: '内蒙古',
          value: 60
        },

        {
          name: '辽宁',
          value: 70
        },
        {
          name: '吉林',
          value: 20
        },
        {
          name: '黑龙江',
          value: 80
        },
        {
          name: '上海',
          value: 210
        },
        {
          name: '江苏',
          value: 40
        },
        {
          name: '浙江',
          value: 39.92
        },
        {
          name: '安徽',
          value: 45
        },
        {
          name: '福建',
          value: 55
        },
        {
          name: '江西',
          value: 60
        },
        {
          name: '山东',
          value: 33
        },
        {
          name: '河南',
          value: 80
        },
        {
          name: '湖北',
          value: 10
        },
        {
          name: '湖南',
          value: 66
        },
        {
          name: '广东',
          value: 190
        },
        {
          name: '广西',
          value: 39.92
        },
        {
          name: '海南',
          value: 20
        },
        {
          name: '重庆',
          value: 55
        },
        {
          name: '四川',
          value: 36
        },
        {
          name: '贵州',
          value: 39.92
        },
        {
          name: '云南',
          value: 39.92
        },
        {
          name: '西藏',
          value: 39.92
        },
        {
          name: '甘肃',
          value: 39
        },
        {
          name: '青海',
          value: 39.92
        },
        {
          name: '宁夏',
          value: 39.92
        },
        {
          name: '新疆',
          value: 39.92
        },
        {
          name: '香港',
          value: 220
        },
        {
          name: '台湾',
          value: 265
        }
      ],
      //   假数据 涟漪动画
      scatterDate: [
        {
          value: [117.283042, 31.86119] // 坐标轴信息
        }
      ]
    }
  },
  mounted() {
    echarts.registerMap('Mymap', chinaMap)
    this.drawLine()
  },
  methods: {
    // 开始画图了
    drawLine() {
      //   const vm = this
      const myChart = echarts.init(this.$refs.chinaMap)

      const option = {
        geo: {
          type: 'map', // 字符串
          map: 'Mymap', //  anHuiMap要和  registerMap这个函数里的名字保持一致
          roam: true, // 拖动缩放
          label: {
            show: true // 展示标签
          },
          zoom: 1, // 设置初始缩放比例
          //  设置地图中心点的坐标
          //   center: [87.617733, 43.792818] // 一新疆为中心点的坐标轴
          itemStyle: {
            // 地图颜色
            normal: {
              areaColor: '#142957',
              borderColor: '#0692a4'
            },
            emphasis: {
              areaColor: '#0b1c2d'
            }
          }
        },
        // // 标题
        // title: {
        //   // text: 'XXXXXXXX',
        //   subtext: '中国地图',
        //   left: 'right'
        // },
        series: [
          {
            data: this.airDate,
            // 把 series系列和geo关联起来
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map'
          },
          {
            data: this.scatterDate, // 配置散点的坐标数据
            type: 'effectScatter', // 图表类型
            coordinateSystem: 'geo', // 指明散点所使用的坐标系统 是geo的坐标系统
            rippleEffect: {
              // 涟漪动画的效果变的更大一点
              scale: 8
            }
          }
        ]
        // visualMap: {
        //   // 设置最小值  最大值
        //   min: 0,
        //   max: 300,
        //   inRange: {
        //     color: ['white', 'red'] // 控制颜色渐变的范围
        //   }
        //   //   calculable: true // 小三角
        // }
      }

      myChart.setOption(option)
      //   this.map.on('click', function(v) {
      //     console.log(v)
      //   })
    }
  }
}
</script>

